<template>
  <div id="warnecharts">
    <div
      style="height: 230px;top:20px"
      :id="echarts"
      class="echarts"
      ref="echarts"
    ></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "Warnecharts",
  props: ["LinesData"],
  methods: {
    drawCharts() {
      let myChart = echarts.init(this.$refs.echarts);
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        dataset: {
                    // source: [
                    //     ['星期一',25, 50, 23, 40, 28, 20, 11],
                    //     ['星期二',30, 52, 36, 38, 43, 35, 20],
                    //     ['星期三',36, 56, 30, 48, 46, 38, 18],
                    //     ['星期四',38, 50, 28, 32, 42, 40, 22],
                    //     ['星期五',40, 52, 26, 38, 43, 35, 24],
                    //     ['星期六',43, 46, 30, 36, 49, 35, 21],
                    //     ['星期日',45, 43, 35, 33, 47, 39, 19]
                    // ]
                   source:this.LinesData,
                },
        grid: {
          //图表相对于容器的位置
          show: false,
          top: "20",
          bottom: "40",
          right: "60",
          left: "60",
        },
        xAxis: [
          //x轴为日期
          {
            type: "category",
            // data: [
            //   "星期一",
            //   "星期二",
            //   "星期三",
            //   "星期四",
            //   "星期五",
            //   "星期六",
            //   "星期日",
            // ],
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#a4d6ff",
              },
            },
            interval: 0,
            //从0刻度开始
            boundaryGap: false,
          },
        ],
        yAxis: [
          //y轴位数据
          {
            //name: "终端数量",
            type: "value",
            minInterval: 10,
            interval: 10, //每次增加几个
            max: 80,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#a4d6ff",
              },
            },
            splitLine: {
              lineStyle: {
                //type: "dashed",
                width: 0.5,
                color: "#002261",
              },
            },
          },
        ],
        series: [
          {
            //name: "设备二",
            type: "line",
            smooth: true,
            showSymbol: false,
            //symbolSize: 10,
            //data: [25, 29, 23, 30, 28, 20, 11],
            itemStyle: {
              normal: { color: "#A52A2B" },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(178,34,34,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(178,34,34,0.1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            type: "line",
            smooth: true, //圆滑的折线
            //data: [30, 32, 36, 38, 43, 35, 31],
            showSymbol: false,
            //symbolSize: 10, //拐点图标大小
            itemStyle: {
              normal: { color: "#CDCD00" }, //折线图颜色
            },
            areaStyle: {
              //下边为设置阴影的区域
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(205,205,0,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(205,205,0,0.1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            type: "line",
            smooth: true, //圆滑的折线
            //data: [43, 46, 40, 48, 46, 45, 42],
            showSymbol: false,
            //symbolSize: 10, //拐点图标大小
            itemStyle: {
              normal: { color: "#EEAD0E" }, //折线图颜色
            },
            areaStyle: {
              //下边为设置阴影的区域
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(238,173,14,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(238,173,14,0.1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
          {
            type: "line",
            smooth: true, //圆滑的折线
            //data: [60, 63, 65, 68, 62, 70, 69],
            showSymbol: false,
            //symbolSize: 10, //拐点图标大小
            itemStyle: {
              normal: { color: "#1E90FF" }, //折线图颜色
            },
            areaStyle: {
              //下边为设置阴影的区域
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(30,144,255,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(30,144,255,0.1)",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      });
    },
  },
  computed: {
    echarts() {
      return "echarts" + Math.random() * 100000;
    },
  },
  mounted() {
    this.drawCharts();
  },
  watch: {
    LinesData() {
      this.drawCharts();
    },
  },
};
</script>
<style scoped></style>
